<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0CVQWFlgkmQJCXPeuUntfGiS6iLFSI2Q&sensor=true">
    </script>
    <script type="text/javascript" src="<?php echo js('infoBox'); ?>"></script>
    <script type="text/javascript">
     
     function getEventbyType(event_type)
     {
     	 $.ajax({
      // have to use synchronous here, else the function 
      // will return before the data is fetched
      async: false,
      type:'POST',
      url: "<?php echo url('event/ajax_getEvent_by_type'); ?>",
      data:"type_event="+event_type+"&region=<?php echo $region ?>",
       
      success: function(data) {
        //alert(data);
        //data2 = eval ('('+data+')');
         clearOverlays();
      	$("#list_result").html(data);
        //alert(ret);
      }
    });

     }

     function getLieuByType(lieu_type)
     {
     	 $.ajax({
      // have to use synchronous here, else the function 
      // will return before the data is fetched
      async: false,
      type:'POST',
      url: "<?php echo url('lieu/ajax_get_lieux_by_type'); ?>",
      data:"type_lieu="+lieu_type+"&region=<?php echo $region ?>",
      success: function(data) {
        //alert(data);
        //data2 = eval ('('+data+')');
        clearOverlays();
      	$("#list_result").html(data);
        //alert(ret);
      }
    });

     }




     var map;
     var arrayMarker = new Array();
     function clearOverlays() {
		  for (var i = 0; i < arrayMarker.length; i++ ) {
		    arrayMarker[i].setMap(null);
		  }
		}

		function setInfo(marker,contentText)
       	{
       		var boxText = document.createElement("div");
       		boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
		boxText.innerHTML = contentText;

	        var myOptions = {
	                 content: boxText
	                 ,disableAutoPan: false
					,maxWidth: 0
					,zIndex: null
	                ,boxStyle: {
	                   border: "1px solid black"
	                  ,textAlign: "center"
	                  ,fontSize: "8pt"
	                  ,width: "200px"
	                 }
	                ,disableAutoPan: true
	                ,pixelOffset: new google.maps.Size(-25, 0)
	               	,closeBoxMargin: "10px 2px 2px 2px"
	                ,closeBoxURL: "<?php echo img('close.png'); ?>"
	                
	                
	                
	                ,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
	        };
	        
	        var popup = new InfoBox(myOptions);
	        //popup.open(map,marker);

		        google.maps.event.addListener(marker, "click", function (e) 
		        	{			popup.open(map, this);		});
		      }

      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(<?php echo $cordinate['lat']; ?>,<?php echo $cordinate['lng']; ?>),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
       	map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
       	
  		}
    

      jQuery(document).ready(function(){initialize();})

 </script>
	<!-- Corps du site -->
    <section id="corps">
		<div class ="list-type-event">
			<?php foreach ($type_event as $value) 
			{
				# code...
			
			echo '<div class="event-item item-selected">';
			echo '<img class="event-photo img-polaroid" src="'.img($value["path_image"]).'">';
			echo '<div class="event-title"><a onclick="getEventbyType('.$value["id"].')">'.$value["nom"].'</div>';
			echo '</div>';
			}
			//print_r($type_lieu);
			foreach ($type_lieu as $value) 
			{
				echo '<div class="event-item item-selected">';
				echo '<img class="event-photo img-polaroid" src="'.img($value["path_image"]).'">';
				echo '<div class="event-title"><a onclick="getLieuByType('.$value["id"].')">'.$value["nom"].'</a></div>';
				echo '</div>';
			}	
			?>
			
			<div class="event-item">
				<img class="event-photo img-polaroid" src="<?php echo img("plus.png");  ?>">
				<div class="event-title">Ajouter</div>
			</div>
			<div style="clear:both"></div>
		</div>
		
		<div style="width:100%;">
			<div id="map_canvas" style="width:60%; height:600px; float:left; margin-right:10px;"></div>
			<div id="list_result" class ="list-event" style="width:35%;float: left;">
				<div class="event-item item-selected" style="height:80px">
					<img class="event-photo img-polaroid" style="float:left;" src="<?php echo img("404.png");  ?>">
					<div style="float:left;width:220px;">
						<span class="event-title">HOLLA</span><br/>
						<span class="event-desc">lollsgidsi  lollsgidsilollsgidsi lollsgidsi  lollsgidsi lollsgidsi lollsgidsi lollsgidsi</span>
					</div>
					<div style="clear:both"></div>
				</div>
				<div class="event-item" style="height:80px">
					<img class="event-photo img-polaroid" style="float:left;" src="<?php echo img("404.png");  ?>">
					<div style="float:left;width:220px;">
						<span class="event-title">HOLLA</span><br/>
						<span class="event-desc">lollsgidsi  lollsgidsilollsgidsi lollsgidsi  lollsgidsi lollsgidsi lollsgidsi lollsgidsi</span>
					</div>
					<div style="clear:both"></div>
				</div>
			</div>
			<div style="clear:both"></div>
		</div>
    </section>
